<template>
  <div>
    <button @click="list.unshift(curI++)">添加</button>
    <button @click="list2.unshift(curI1++)">添加2</button>
    <!--<item v-for="item in list" :key="item" :item="item"></item>-->
    <!--<item v-for="item in list2" :key="item" :item="item"></item>-->
    <draggable
      element="div"
      v-model="stageList"
      class="drag_content"
      :options="dragOptions">
      <item v-for="item in list" :key="item + 'day'" :item="item"></item>
    </draggable>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
    'item': {
      template: `<div><input type="checkbox"><span>{{item}}</span></div>`,
      props: {
        item: {}
      }
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        ghostClass: 'ghost',
      }
    },
  },
  data() {
    return {
      curI: 5,
      curI1: 5,
      list: [1, 2, 3, 4],
      list2: [1, 2, 3, 4],
    }
  },
  created() {
    this.src = pdf.createLoadingTask(this.src)
  },
  methods: {
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    }
  }
}
</script>

<style lang="less" scoped>
  .ca{
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
  }
  .cb  {
    height: 40px;
    width: 500px;
  }
  .cc {
    position: absolute;
    right: 0px;
    width: 40px;
  }
</style>
